/*****
 * 选择标签组件
 */
import { useEffect, useState } from 'react';
import CommonModal from '../CommonModal';
import CommonTable from '../CommonTable';
import CommonLoading from '../CommonLoading';
import UpdateTag from './UpdateTag';
import { Button, Alert, Popconfirm, message } from 'antd';
import Api from './service';


const SelectTag = (props) => {

	const { handleOK, handleCancel } = props;

	//标签列表
	const [tagList, setTagList] = useState([]);

	const [open, setOpen] = useState(false);

	const [editTag, setEditTag] = useState(false);
	const [loading, setLoading] = useState(false);

	const [item, setItem] = useState();

	//初始化获取标签列表
	useEffect(() => {
		setOpen(true);
		getTagList();
	}, [])

	//获取标签列表
	const getTagList = async () => {
		setLoading(true);
		const { success, data } = await Api.queryUserTagList();
		setLoading(false);
		if (success) {
			setTagList(data);
		}
	}

	//是否触发ok事件
	let triggerEvent = false;

	//点击取消
	const onCancel = () => {
		triggerEvent = false;
		setOpen(false);
	}

	//关闭弹框
	const afterClose = (bool) => {
		if (triggerEvent) {
			//在此抛出需要的参数
			handleOK();
		} else {
			handleCancel();
		}
	}

	//点击编辑标签
	const handleEdit = (val) => {
		setItem(val);
		setEditTag(true);
	}

	//删除标签
	const delTag = async (id) => {
		setLoading(true);
		const { success } = await Api.delUserTag({
			id
		})
		if(success) {
			message.success('删除成功');
			getTagList();
		}
		setLoading(false);
	}

	//更改排序
	const updateTagSort = async (val) => {
		setLoading(true);
		const { success } = await Api.updateTagSort(val);
		if(success) {
			message.success('操作成功！');
			setTagList(val);
		}
		setLoading(false);
	}

	const columns = [
		{
			title: '序号',
			width: 60,
			dataIndex: 'sort',
			key: 'sort',
            render: (t, r, i) => i + 1,
		},
		{
			title: '自定义标签',
			dataIndex: 'name',
			width: 200,
			key: 'name'
		},
		{
			title: '操作',
			width: 120,
			dataIndex: 'id',
			key: 'id',
			render: (t, r) => {
				return (
					<>
						<Button type='link' onClick={() => handleEdit(r)}>编辑</Button>
						<Popconfirm title="确认删除吗" onConfirm={() => delTag(t)}>
							<Button type='link' danger>删除</Button>
						</Popconfirm>
					</>
				)
			}
		},
	]

	//表格参数
	const TableProps = {
		isSortData: true,
		rowKey: 'id',
		columns,
		data: tagList,
		bordered: true,
		scroll: { y: '40vh' },
		onDragEnd(val) {
			updateTagSort(val);
		}
	}

	//新增和编辑弹框
	const UpdateTagProps = {
		item,
		handleCancel() {
			setEditTag(false);
			setItem();
		},

		handleOk() {
			setEditTag(false);
			setItem();
			getTagList();
		}
	}

	return (
		<CommonModal
			title="维护自定义标签"
			open={open}
			afterClose={afterClose}
			width='600px'
			onCancel={onCancel}
			footer={
				<Button onClick={onCancel}>关闭</Button>
			}
		>
			<Alert description="除去固定标签外、增加的其他自定义标签。可上下拖动标签顺序" />
			<Button type="primary" style={{ margin: '12px 0' }} onClick={() => setEditTag(true)}>新增标签</Button>
			<CommonTable {...TableProps} />
			{editTag && <UpdateTag {...UpdateTagProps} />}
			<CommonLoading loading={loading} />
		</CommonModal>
	)
}

export default SelectTag;
